<template>
    <div>
        <el-row>
          <el-col :span="12">
            <el-form inline size="mini">
                <el-form-item class="mb0">
                    <el-select placeholder="所有资源" clearable>
                        <el-option>所有资源</el-option>
                    </el-select>
                </el-form-item>
                <el-form-item class="mb0">
                    <el-input placeholder="请输入关键词"></el-input>
                </el-form-item>
                <el-form-item class="mb0">
                    <el-button type="primary" icon="el-icon-search">搜索</el-button>
                </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="12" class="text-right">
            <el-button type="primary" size="mini" @click="createDialog=true">申请资源</el-button>
          </el-col>
        </el-row>
        <div class="table-box mt20">
            <el-table :data="list" size="mini" style="width: 100%">
                <el-table-column type="index" :label="$t('#')" width="50"></el-table-column>
                <el-table-column prop="username" label="姓名"></el-table-column>
                <el-table-column prop="phone" label="电话"></el-table-column>
                <el-table-column prop="company" label="单位/学校"></el-table-column>
                <el-table-column prop="csName" label="超算名称"></el-table-column>
                <el-table-column prop="createTime" label="申请时间">
                </el-table-column>
                <el-table-column prop="auditTime" label="审核时间">
                </el-table-column>
                <el-table-column prop="account" label="超算账号">
                </el-table-column>
                <el-table-column prop="status" label="申请状态">
                    <template slot-scope="scope">
                        <span v-if="scope.row.status === 1" class="text-success">申请成功</span>
                        <span v-if="scope.row.status === 0" class="text-danger">申请中...</span>
                        <span v-if="scope.row.status === 2" style="color:#F7564E">申请失败</span>
                    </template>
                </el-table-column>
                <el-table-column :label="$t('Operation')" width="160">
                    <template slot-scope="scope">
                        <el-tooltip content="申请详情" placement="top">
                            <el-button type="primary" size="mini" icon="el-icon-edit-outline" @click="_view(scope.row)"
                                       circle></el-button>
                        </el-tooltip>
                        <el-tooltip v-if="scope.row.status === 0" content="审核" placement="top">
                            <el-button type="primary" size="mini" icon="el-icon-user" @click="_audit(scope.row)"
                                       circle></el-button>
                        </el-tooltip>
                        <el-tooltip content="概览" placement="top">
                            <el-button type="primary" size="mini" icon="el-icon-news" @click="$router.push({name:'cs-resources-detial',params:{csName:scope.row.csName}})"
                                       circle></el-button>
                        </el-tooltip>
                        <el-tooltip content="链接" placement="top">
                            <el-button type="primary" size="mini" icon="el-icon-link" @click="_edit(scope.row)"
                                       circle></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page-box">
            <el-pagination background :page-sizes="[10, 30, 50]" layout="sizes, prev, pager, next, jumper" :total="4">
            </el-pagination>
        </div>
        <transition name="el-fade-in">
          <applyResource v-if="createDialog" @close="createDialog=false"></applyResource>
        </transition>
        <el-dialog title="资源申请详情" :visible.sync="infoDialog" width="440px" append-to-body>
          <div style="padding:0px 10px;">
            <div class="info-form">
              <span class="label">申请状态：</span>
              <span> <span v-if="infoData.status === 1" class="text-success">申请成功</span>
                        <span v-if="infoData.status === 0" class="text-danger">申请中...</span>
                        <span v-if="infoData.status === 2" style="color:#F7564E">申请失败</span></span>
            </div>
            <div class="info-form">
              <span class="label">姓名：</span>
              <span>{{ get(infoData,'username') }}</span>
            </div>
            <div class="info-form">
              <span class="label">电话：</span>
              <span>{{ get(infoData,'phone') }}</span>
            </div>
            <div class="info-form">
              <span class="label">单位/学校</span>
              <span>{{ get(infoData,'company') }}</span>
            </div>
            <div class="info-form">
              <span class="label">申请时间：</span>
              <span>{{ get(infoData,'createTime') }}</span>
            </div>
            <div class="info-form">
              <span class="label">审核时间：</span>
              <span>{{ get(infoData,'auditTime','-') }}</span>
            </div>
            <div class="info-form">
              <span class="label">审核备注：</span>
              <span>{{ get(infoData,'auditRemark','-') }}</span>
            </div>
            <div class="info-form">
              <span class="label">超算账号：</span>
              <span>{{ get(infoData,'account','-') }}</span>
            </div>
          </div>
        </el-dialog>
        <el-dialog title="申请单审核" :visible.sync="auditDialog" width="440px" append-to-body>
          <applyAudit   @close="auditDialog=false"></applyAudit>
        </el-dialog>
    </div>
</template>
<script>
  import applyResource from './applyResource'
  import applyAudit from './applyAudit'
  export default {
    components: {
      applyResource,
      applyAudit
    },
    data () {
      return {
        createDialog: false,
        infoDialog: false,
        auditDialog: false,
        infoData: {},
        list: [
          {
            username: '林洋',
            phone: '18670392874',
            company: '威胜信息',
            csName: '长沙超算中心',
            createTime: '2023-08-01 09:22:09',
            auditTime: '2023-08-15 09:20:12',
            account: 'berlin123',
            status: 1
          },
          {
            username: '李晓易',
            phone: '15580995320',
            company: '中国科学院工程研究所',
            csName: '深圳超算中心',
            createTime: '2023-08-03 17:22:09',
            auditTime: '2023-08-15 09:35:00',
            account: '',
            status: 2
          },
          {
            username: '张峰',
            phone: '17777076638',
            company: '上海交通大学',
            csName: '上海超算中心',
            createTime: '2023-08-07 10:32:12',
            auditTime: '',
            account: '',
            status: 0
          },
          {
            username: '王总',
            phone: '18670391789',
            company: '清华大学',
            csName: '天津超算中心',
            createTime: '2023-08-15 03:42:35',
            auditTime: '',
            account: '',
            status: 0
          }
        ]
      }
    },
    props: {

    },
    methods: {
      _view (item) {
        this.infoDialog = true
        this.infoData = item
      },
      _audit (item) {
        this.auditDialog = true
        this.infoData = item
      }
    },
    watch: {

    },
    created () {
    },
    mounted () {
    }
  }
</script>
<style scoped lang="scss">
.info-form {
  display: flex;
  font-size: 16px;
  margin-bottom: 5px;
  .label {
    color: #666666;
    width: 140px;
    font-size: 16px;
    text-align: left;
    font-weight: 400;

  }
}
</style>
